<template>
	<view class="pb124">
		<!-- 搜索框部分 -->
		<view class="w710 auto pt26">
			<u-search
				height="80"
				bgColor="#F5F6FA"
				:show-action="false"
				color="#A6A7A9"
				placeholder="请输入你要搜索的产品"
				v-model="search"
				:inputStyle="{ fontSize: '28rpx' }"
				@input="input"
			></u-search>
		</view>
		<!-- tab部分 -->
		<view class="tabs mt28">
			<u-tabs
				:list="list"
				:is-scroll="false"
				v-model="current"
				@change="change"
				activeColor="#260E03"
				inactiveColor="#260E03"
				:barStyle="{ background: 'linear-gradient(180deg, #FF8964 0%, #FD4B2C 100%)' }"
			></u-tabs>
		</view>
		<!-- 数据部分 -->
		<view class="mb40" v-for="(item, index) in arr" :key="item.id">
			<IndexData :data="item" @goDetails="goDetails"></IndexData>
		</view>
	</view>
</template>

<script setup>
// import { indexList } from '../index/index.js';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { reactive, ref,onMounted } from 'vue';
import { indexGooods } from '@/utils/api.js';
onLoad(() => {
	change();
});
onMounted(()=>{
	let pageHead = document.getElementsByTagName('uni-page-head');
	pageHead[0].style.display = 'none';
})
//tabs数组
let list = reactive([
	{
		name: '全部'
	},
	{
		name: '预热中'
	},
	{
		name: '热销中'
	},
	{
		name: '已售罄'
	}
]);
//跳转到产品详情页面
const goDetails = id => {
	uni.navigateTo({
		url: '/pages/details/details?id=' + id
	});
};

let current = ref(0); //当前激活的下标
let arr = ref([]); //循环的数组
let limit = ref(0);
let type = ref('all');
let search = ref('');
let change = (index = 0) => {
	current.value = index;
	if (current.value == 0) {
		type.value = 'all';
		getProduct('all');
	}
	if (current.value == 1) {
		limit.value = 0;
		type.value = 0;
		getProduct(type.value);
		arr.value = arr.value.filter(el => el.type == 0);
	}
	if (current.value == 2) {
		limit.value = 0;
		type.value = 1;
		getProduct(type.value);
		arr.value = arr.value.filter(el => el.type == 1);
	}
	if (current.value == 3) {
		limit.value = 0;
		type.value = 2;
		getProduct(type.value);
		arr.value = arr.value.filter(el => el.type == 2);
	}
};
const getProduct = () => {
	let data = {
		type: type.value,
		limit: limit.value,
		page: 10,
		search: search.value
	};
	indexGooods(data).then(res => {
		if (limit.value == 0) {
			arr.value = res.data;
		}
		if (limit.value > 0) {
			if (res.data.length === 0) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				});
			} else {
				arr.value.push(...res.data);
			}
		}
	});
};
//搜索
let input = () => {
	let data = {
		type: type.value,
		limit: limit.value,
		page: 10,
		search: search.value
	};
	indexGooods(data).then(res => {
		if (limit.value == 0) {
			arr.value = res.data;
		}
		if (limit.value > 0) {
			if (res.data.length === 0) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				});
			} else {
				arr.value.push(...res.data);
			}
		}
	});
};
onReachBottom(() => {
	limit.value += 10;
	getProduct(type.value);
});
</script>

<style lang="scss" scoped>
page {
	background: #fff;
}
:deep(.u-icon__icon) {
	font-size: 40rpx !important;
	padding-left: 20rpx;
}
</style>
